<template>
    <div class="w-full overflow-hidden h-full relative" >
        <!--
            :slidesPerView="swiper_options.slidesPerView"
            :scrollbar="{ draggable: false }"  
        -->
        <swiper
            :scrollbar="{ draggable: true }"  
            :autoplay="swiper.autoplay"
            :loop="swiper.loop"
            :speed="swiper.speed"
            :pagination="swiper.pagination"
            :spaceBetween="swiper.spaceBetween"
            :centeredSlides="swiper.centeredSlides"
            :coverflowEffect="swiper.coverflowEffect"
            :flipEffect="swiper.flipEffect"
            :effect="swiper.effect"
            :slides-per-view="1"
            navigation
            class="swiper swiper-container"
            >
            <swiper-slide v-for="(item,index) in swiper_content" :key="index"> 
                <div class="w-full">
                    <div>
                        <a href="">
                            <img :src="item.src" alt="">
                        </a>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
/
<script lang='ts'>
import {swiper} from './swiper'
import { ref,reactive,nextTick,toRefs,defineComponent,onMounted,getCurrentInstance} from 'vue'
export default defineComponent({
    name:'',
    setup: ()=>{
        let data = reactive({
            swiper,
            swiper_content:[
                {src:'http://cdn1.qingline.net/banner@2x.png'},
                {src:'http://cdn1.qingline.net/banner_3@2x.png'},
                {src:'http://cdn1.qingline.net/banner_4@2x.png'},
                {src:'https://cdn1.qingline.net/banner_2@2x.png'},
            ]
        })
        onMounted(()=>{
        })
        const { proxy } = getCurrentInstance() as any;
         
        return {
           ...toRefs(data),
        }
    }
})
</script>
<style lang="scss">
@import './swiper.scss'
</style>